﻿<%@page import="com.rosense.client.i.IWriteReader"%>
<%@page import="com.rosense.server.config.HostCaches"%>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<style>
.layui-laydate {
	top: 35px !important;
}
</style>
<div style="position: relative;">
	<table style="width: 100%;" class="layui-form">
		<tr>
			<td style="width: 100px;"><select lay-filter="type" id="type">
					<%
						for(IWriteReader wr:HostCaches.wrMap.values()){
					%>
					<option value="<%=wr.getName()%>"><%=wr.getText()%></option>
					<%
						}
					%>
			</select></td>
			<td style="width: 200px">
						<input type="text" style="margin-left: 5px;" class="layui-input" id="limit"
				 placeholder="默认限制大于50" value="">
			</td>
			<td style="width: 300px;"><input type="text" style="margin-left: 5px;" class="layui-input" id="time"
				readonly="readonly" placeholder="选择时间" value=""></td>
			<td>
				<button class="layui-btn layui-btn-normal " id="query-btn1">查询</button>
			</td>
		</tr>
	</table>
</div>
<div style="padding: 5px;">
	<table class="table-hosts" id="table-hosts">
		<thead>
			<tr>
				<th>主机</th>
				<th>时间</th>
				<th>天平均</th>
				<th>小时平均</th>
			</tr>
		</thead>
		<tbody id="history-tbody-hosts"></tbody>
	</table>
</div>
<!-- layui规范化用法 -->
<script type="text/javascript">
	var hei = $(document).height();
	$(document).ready(function() {
		$("#table-hosts").width($(document).width() - 280);
		form.render('select');
		//常规用法
		laydate.render({
			elem : '#time',
			type : 'date',
			format : 'yyyyMMdd',
			theme : '#393D49',
			range: true,
			done : function(value, date, endDate) {
			}
		});
	});
	$(document).on("click", "#query-btn1", function() {
		if($("#time").val()==''){
			layer.msg('选择一个时间', {
				time : 20000, //20s后自动关闭
				btn : [ '明白了' ]
			});
			return;
		}
		if ($("#limit").val() == '') {
			$("#limit").val(50);
		}
		loadUsed();
	});
	function loadUsed() {
		workUtils.ajaxGet("../data/used", {
			limit : $("#limit").val(),
			type : $("#type").val(),
			time : $("#time").val(),
		}, function(data) {
			var html = "";
			for ( var i in data) {
				var item = data[i];
				var host = i.split('_')[0];
				var time = i.split('_')[1];
				html += '<tr>';
				html += '<td style="width:15%">' + host;
				html += '<td  style="width:10%">' + time;
				html += '</td>';
				html += '<td  style="width:25%">' + item.day;
				html += '</td>';
				html += '<td style="width:50%">' + item.hour + '</td>';
				html += '</td>';
				html += '</tr>';
			}
			$("#history-tbody-hosts").html(html);
		});
	}
</script>